<template>
  <div class="lnvite-rebate">
    <div class="lnvite-top">
      <div class="lnvite-top-info flex">
        <div class="lnvite-top-div flex">
          <div class="lnvite-top-label">当前总返利</div>
          <div class="lnvite-money chooseColor">{{ allMoney }}元</div>
        </div>
        <div class="lnvite-top-div flex" style="margin-left: 60px">
          <div class="lnvite-top-label">我的邀请码</div>
          <div class="lnvite-money chooseColor">{{ code }}</div>
          <img
            :data-clipboard-text="code"
            class="cursor tag-read"
            style="width: 18px; height: 18px"
            src="~@/assets/copy.png"
            alt=""
            @click="copy"
          />
        </div>
      </div>
      <div class="lnvie-top-tip">你将获得被邀请人每次消费的10%作为返利</div>
    </div>
    <div class="lnvite-rebate-h4">返利列表</div>
    <div
      class="buy-table"
      style="
        margin: 20px 0;
        max-height: 320px;
        overflow: auto;
        position: relative;
      "
    >
        <div class="buy-header flex" style="position: sticky; top: 0">
          <div class="header-item flex">序号</div>
          <div class="header-item flex">返利用户</div>
          <div class="header-item flex">返利金额（元）</div>
          <div class="header-item flex" style="padding: 0 20px">购买时间</div>
        </div>
        <el-form v-loading="loading">
        <div v-if="tableLength > 0">
          <div
            class="buy-body flex"
            v-for="(item, index) in tableList"
            :key="'table' + index"
          >
            <div
              class="body-item flex"
              :style="
                index == tableLength - 1
                  ? 'border-bottom:1px solid #4a4e59'
                  : ''
              "
            >
              {{ index + 1 }}
            </div>
            <div
              class="body-item flex"
              :style="
                index == tableLength - 1
                  ? 'border-bottom:1px solid #4a4e59'
                  : ''
              "
            >
              {{ item.ref_user }}
            </div>
            <div
              class="body-item flex"
              :style="
                index == tableLength - 1
                  ? 'border-bottom:1px solid #4a4e59'
                  : ''
              "
            >
              {{ item.ref_get }}
            </div>
            <div
              class="body-item flex"
              :style="
                index == tableLength - 1
                  ? 'border-bottom:1px solid #4a4e59;padding:0 20px'
                  : 'padding:0 20px'
              "
            >
              {{ formatDate(item.datetime) }}
            </div>
          </div>
        </div>
        <div v-else class="no-data flex">暂无记录</div>
        </el-form>
    </div>
    <div class="flex">
      <div>
        总 <span class="chooseColor">{{ total }}</span> 条记录
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="pages.current"
        :page-size="pages.size"
        @current-change="currentChange"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import { getInviteInfo, getInviteList } from "../../utils/api";
import { formatTimestampToDate } from "../../utils/fileUtils";
export default {
  name: "lnvite-rebate",
  data() {
    return {
      loading: false,
      allMoney: 158,
      code: "ABDS",
      pages: {
        current: 1,
        size: 7,
      },
      total: 7,
      tableLength: 0,
      tableList: [],
    };
  },
  methods: {
    currentChange(v) {
      this.pages.current = v;
      this.handInviteList(this.pages.current);
    },
    copy() {
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", (e) => {
        this.$message.success("复制成功");
      });
      clipboard.on("error", (e) => {
        this.$message.success("复制失败");
      });
    },
    handInviteInfo() {
      getInviteInfo().then((res) => {
        if (res.data && res.data.ret == 1) {
          this.allMoney = res.data.data.paybacks_sum;
          this.code = res.data.data.code;
        } else {
          this.$message.error("网络异常");
        }
      });
    },
    handInviteList(page) {
      this.loading = true;
      getInviteList(page)
        .then((res) => {
          this.loading = false;
          if (res.data && res.data.ret == 1) {
            this.tableList = [];
            this.tableList = res.data.data.payback_list;
            this.tableLength = this.tableList.length;
            this.total = res.data.data.payback_list_total;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    formatDate(datetime) {
      return formatTimestampToDate(datetime);
    },
  },
  mounted() {
    this.handInviteInfo();
    this.handInviteList(this.pages.current);
  },
};
</script>

<style>
.lnvite-rebate {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.lnvite-rebate-h4 {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #b7b7b7;
}
.lnvite-top {
  width: 100%;
  padding: 33px 0 23px 0;
  border-bottom: 1px solid #4a4e59;
  margin-bottom: 22px;
}
.lnvie-top-tip {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b7b7b7;
  margin-top: 22px;
}
.lnvite-top-info {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
.lnvite-money {
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #09d0ce;
  margin: 0 11px 0 21px;
}
</style>